<template>
    <el-tooltip :disabled="disabled">
        <div class="by-help" :class="{'no-dialog': disabled}" @click="showMessage">
            <div>
                <i v-if="!disabledIcon" class="el-icon-question icon" :style="{color: iconColor}"></i>
                <span class="tip-title" v-if="title||label" v-html="title||label"></span>
            </div>
        </div>
        <template #content>
            <slot></slot>
        </template>
    </el-tooltip>
</template>

<script>
    const {getCurrentInstance, toRef, h, ref, onMounted} = Vue;
    
    export default {
        name:"ByHelp",
        
        props: {
            title: {
                default: ""
            },
            
            label: {
               default: '',
            },
            
            iconColor: {
                default: "rgb(179 176 172)"
            },
            
            disabledIcon: {
                default: false
            }
        },
        
        setup(props, {slots}) {
            let global = getCurrentInstance().appContext.config.globalProperties;
            let disabled = ref(!slots.default || slots.default().length==0);
    
            let showMessage = _ => {
                if(disabled.value) {
                    return;
                }
    
                global.$alert(
                    h('div', null, slots.default()), {
                        showClose:false,
                        iconClass:"el-icon-question",
                        confirmButtonText:"明白"}
                );
            };
            
            return {
                showMessage,
                disabled
            }
        }
    }
</script>

<style scoped>
    .by-help {
        display: inline-block;
        cursor: pointer;
        outline: none;
        margin-left:5px;
    }

    .by-help > div {
        height: 24px;
        align-items: center;
        display: flex;
    }

    .tip-title {
        color:gray;
        font-size: 13px;
        margin-left:2px;
    }
    
    .icon{
        font-size: 16px;
    }
    
    .no-dialog {
        cursor: default !important;
    }
</style>
